<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  html, body {
    margin: 0;
    overflow: hidden;
    font-family: sans-serif;
    background: #13091B;
    height: 100%;
  }
  body {
    background: url(https://p1.music.126.net/gAmIGjlWnYXE_0O8LFp5-w==/109951164382001054.jpg) no-repeat;
    background-size: cover;
  }
  #canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  audio {
    visibility: hidden;
  }
  #play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #13091B;
    background: #007A99;
    display: block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 4px;
    letter-spacing: 0.1em;
    z-index: 1;
    text-align: center;
    text-decoration: none;
  }
  </style>
</head>
<body>
  <div id="content">
    <canvas id="canvas"></canvas>
    <audio src="//m8.music.126.net/21180815163607/04976f67866d4b4d11575ab418904467/ymusic/515a/5508/520b/f0cf47930abbbb0562c9ea61707c4c0b.mp3?infoId=92001" id="audio" crossOrigin="anonymous"></audio>
    <a href="javascript:;" id="play-btn">Play</a>
  </div>
  <script>
  var btn = document.getElementById('play-btn');
  var audio = document.getElementById('audio');
  btn.addEventListener('click', function() {
    btn.style.display = 'none';
    audio.play();
    onLoadAudio();
  });

  function onLoadAudio() {
    var canvas = document.getElementById('canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    var ctx = canvas.getContext('2d');
    var WIDTH = canvas.width;
    var HEIGHT = canvas.height;
    // 音量再强, 输入 量化的， 
    
    var audioCtx = new(window.AudioContext || window.webkitAudioContext)();
    //对音乐做分析
    var analyser = audioCtx.createAnalyser(); 
    analyser.fftSize = 512;
    // audio 歌
    var source = audioCtx.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(audioCtx.destination);

    var bufferLength = analyser.frequencyBinCount; //频率
    var dataArray = new Uint8Array(bufferLength); //创建了一个数组
    

    //宽度
    var barWidth = WIDTH /bufferLength * 1.5;
    var barHeight;
    
    function renderFrame() {
      requestAnimationFrame(function() {
        renderFrame();
        // console.log('----');
        ctx.clearRect(0, 0, WIDTH, HEIGHT);
        analyser.getByteFrequencyData(dataArray);
         console.log(dataArray);
        for (var i = 0, x = 0; i < bufferLength; i++) {
          var r = barHeight + 25 * (i / bufferLength);
              var g = 250 * (i / bufferLength);
              // console.log(i);
              var b = 50;
              // console.log("rgb(" + r + "," + g + "," + b + ")");
            
          barHeight = dataArray[i];   //不一样
          ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
          ctx.fillRect(x, HEIGHT - barHeight, barWidth, barHeight);  //圆柱形
          x += barWidth + 2;
        }
      })
    }
    renderFrame();
  }
  </script>
</body>
</html>